<!--
 * @Autor: dingxiaolin
 * @Date: 2021-07-20 16:29:01
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-26 13:10:37
-->
<template>
    <scrollBar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
        <slot></slot>
    </scrollBar>
</template>

<script lang="ts">
import { defineComponent, ref, unref, nextTick } from 'vue'
import { scrollBar, ScrollbarType } from './index'

import { useScrollTo } from '@/hooks/useScrollTo'

export default defineComponent({
    name: 'scrollContainer',
    components: { scrollBar },
    setup() {
        const scrollbarRef = ref<Nullable<ScrollbarType>>(null)

        function scrollTo(to: number, duration = 500) {
            const scrollbar = unref(scrollbarRef)
            if (!scrollbar) {
                return
            }

            nextTick(() => {
                const wrap = unref(scrollbar.wrap)
                if (!wrap) {
                    return
                }
                const { start } = useScrollTo({
                    el: wrap,
                    to,
                    duration
                })
                start()
            })
        }

        function getScrollWrap() {
            const scrollbar = unref(scrollbarRef)
            if (!scrollbar) {
                return null
            }
            return scrollbar.wrap
        }

        function scrollBottom() {
            const scrollbar = unref(scrollbarRef)
            if (!scrollbar) {
                return
            }

            nextTick(() => {
                const wrap = unref(scrollbar.wrap)
                if (!wrap) {
                    return
                }
                const scrollHeight = wrap.scrollHeight as number
                const { start } = useScrollTo({
                    el: wrap,
                    to: scrollHeight
                })
                start()
            })
        }

        return {
            scrollbarRef,
            scrollTo,
            scrollBottom,
            getScrollWrap
        }
    }
})
</script>
<style lang="less">
.scroll-container {
    width: 100%;
    height: 100%;

    .scrollbar__wrap {
        margin-bottom: 18px !important;
        overflow-x: hidden;
    }

    .scrollbar__view {
        box-sizing: border-box;
    }
}
</style>
